<!--  -->
<template>
    <div v-show="isShow">
        <el-dialog :title="dialogTitle" :visible.sync="editVisible" width="60%">
            <div class="handle-box">
                查询条件：
                <el-input class="handle-input mr10" size="mini" v-model="queryData.text01"></el-input>
                <el-select
                    v-model="queryData.address"
                    size="mini"
                    placeholder="地址"
                    class="handle-select mr10"
                >
                    <el-option key="1" label="广东省" value="广东省"></el-option>
                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select>
                <el-input
                    v-model="queryData.text02"
                    size="mini"
                    placeholder="用户名"
                    class="handle-input mr10"
                ></el-input>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <div class="tree-box flex">
                <div class="flex-left">
                    <el-tree
                        :data="data"
                        :props="defaultProps"
                        show-checkbox
                        @node-click="handleNodeClick"
                    ></el-tree>
                </div>
                <div class="flex-right">
                    <el-table
                        :data="tableData"
                        width="100%"
                        border
                        class="table"
                        ref="multipleTable"
                        :row-class-name="tableRowClassName"
                        @selection-change="selectionChange"
                        @row-click="onRowClick"
                    >
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <!-- <el-table-column width="55" align="center">
                            <template slot-scope="scope">
                                <el-checkbox :checked="scope.row.checked" @click.prevent="checkclick(scope.row.checked)"></el-checkbox>
                            </template>
                        </el-table-column>-->
                        <el-table-column prop="id" label="序号" type="index" align="center"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="department" label="部门"></el-table-column>
                        <el-table-column prop="job" label="岗位"></el-table-column>
                    </el-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main.js';
var _ = require('lodash');
export default {
    props: {
        isShow: false,
        dialogTitle: ''
    },
    data() {
        return {
            editVisible: false,
            queryData: {
                text01: '',
                address: '',
                text02: ''
            },
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableData: [
                {
                    checked: false,
                    id: 1,
                    name: '李建国1',
                    department: '信息部',
                    job: '风险管理'
                },
                {
                    checked: false,
                    id: 1,
                    name: '李建国2',
                    department: '信息部',
                    job: '风险管理'
                },
                {
                    checked: false,
                    id: 1,
                    name: '李建国3',
                    department: '信息部',
                    job: '风险管理'
                },
                {
                    checked: true,
                    id: 1,
                    name: '李建国4',
                    department: '信息部',
                    job: '风险管理'
                }
            ],
            multipleSelection: []
        };
    },
    methods: {
        handleSearch() {
            // getTree()
        },
        // 获取树的数据
        getTree() {
            let tree = [
                {
                    id: '1263996169886109696',
                    isDel: 0,
                    createUserId: null,
                    createUserName: null,
                    createTime: '2020-05-23T00:52:25.000+0000',
                    updateUserId: null,
                    updateUserName: null,
                    updateTime: null,
                    documentTypeName: '人事2',
                    parentId: '0',
                    domain: 'www.lyuyan.com',
                    child: null
                },
                {
                    id: '1263996102567530496',
                    isDel: 0,
                    createUserId: null,
                    createUserName: null,
                    createTime: '2020-05-23T00:52:09.000+0000',
                    updateUserId: null,
                    updateUserName: null,
                    updateTime: null,
                    documentTypeName: '人事1',
                    parentId: '0',
                    domain: 'www.lyuyan.com',
                    child: [
                        {
                            id: '1263997751314878464',
                            isDel: 0,
                            createUserId: null,
                            createUserName: null,
                            createTime: '2020-05-23T00:58:43.000+0000',
                            updateUserId: null,
                            updateUserName: null,
                            updateTime: null,
                            documentTypeName: '人事11',
                            parentId: '1263996102567530496',
                            domain: 'www.lyuyan.com',
                            child: [
                                {
                                    id: '1264000180949356544',
                                    isDel: 0,
                                    createUserId: null,
                                    createUserName: null,
                                    createTime: '2020-05-23T01:08:22.000+0000',
                                    updateUserId: null,
                                    updateUserName: null,
                                    updateTime: null,
                                    documentTypeName: '人事111',
                                    parentId: '1263997751314878464',
                                    domain: 'www.lyuyan.com',
                                    child: null
                                }
                            ]
                        }
                    ]
                }
            ];
            let newTree = appMain.dealTree(tree);
            console.log(newTree);
            this.data = newTree;
        },
        // 树元素点击事件
        handleNodeClick(e) {
            this.tableDataIndex = '';
            console.log(e, 'treeItem');
            // 发请求获取右下表格数据
        },
        // 表格行点击事件
        tableRowClassName({ row, rowIndex }) {
            //把每一行的索引放进row
            row.index = rowIndex;
        },
        selectionChange(val) {
            this.multipleSelection = val;
        },
        onRowClick(row, event, column) {
            //行点击消除new标记
            console.log(row, event, column);
            this.$refs.multipleTable.toggleRowSelection(row);
        },
        checkclick(d) {},
        // chooseItem (row, column, event) {
        //     console.log(row, column, event);
        // },
        close() {
            this.$emit('close', {
                showDialog: false
            });
        },
        // 从弹窗返回主页面的数据
        saveEdit() {
            this.$emit('edit', { backData: this.multipleSelection, showDialog: false });
        }
    },
    watch: {
        isShow: function(newVal, oldVal) {
            console.log(newVal, 'newVal');
            if (newVal == true) {
                this.editVisible = true;
                this.getTree();
            } else {
                this.editVisible = false;
            }
        },
        editVisible: function(newVal) {
            this.$emit('close', {
                showDialog: newVal
            });
        }
    },
    computed: {
        aNum() {
            return 123;
        }
    },
    created() {}
};
</script>

<style scoped>
.el-dialog__body {
    padding: 0 20px 30px;
}
.handle-input {
    width: 120px;
    display: inline-block;
}
.handle-select {
    width: 120px;
}
.tree-box {
    border: 1px solid #ddd;
    margin-top: 20px;
    height: 300px;
}
.flex-left {
    width: 200px;
    border-right: 1px solid #ddd;
}
.flex-right {
    flex: 1;
}
</style>